import React, { useState } from 'react';
import { Card, Table, Button, Space, Tag, Tabs, Badge, Avatar, List, Typography } from 'antd';
import { MessageOutlined, BellOutlined, MailOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import './index.less';

const { TabPane } = Tabs;
const { Text } = Typography;

const Message: React.FC = () => {
  const [activeTab, setActiveTab] = useState('1');

  const notifications = [
    { id: 1, title: '系统维护通知', content: '系统将于2023年5月20日22:00-次日凌晨2:00进行系统维护，请合理安排工作...', time: '2023-05-15 14:25', read: false },
    { id: 2, title: '账号安全提醒', content: '您的账号于昨日12:30在异地登录，如非本人操作请及时修改密码...', time: '2023-05-14 12:45', read: false },
    { id: 3, title: '待办任务提醒', content: '您有3个任务即将到期，请及时处理...', time: '2023-05-13 10:12', read: true },
    { id: 4, title: '系统升级完成', content: '系统已完成V2.3版本升级，新增功能包括...', time: '2023-05-10 09:25', read: true },
  ];

  const messages = [
    { id: 1, sender: '张三', avatar: 'https://i.pravatar.cc/150?img=1', content: '请审批一下这个申请单', time: '2023-05-15 16:30', read: false },
    { id: 2, sender: '李四', avatar: 'https://i.pravatar.cc/150?img=2', content: '关于项目进度的讨论，请查收', time: '2023-05-15 11:20', read: false },
    { id: 3, sender: '王五', avatar: 'https://i.pravatar.cc/150?img=3', content: '已经处理完成，请查看结果', time: '2023-05-14 14:25', read: true },
  ];

  const alarms = [
    { id: 1, title: '服务器CPU使用率过高', level: 'error', content: '服务器CPU使用率超过90%，请尽快处理', time: '2023-05-15 15:40', read: false },
    { id: 2, title: '数据库连接数过多', level: 'warning', content: '数据库连接数超过阈值，可能影响系统性能', time: '2023-05-15 10:25', read: false },
    { id: 3, title: '存储空间不足警告', level: 'warning', content: '系统存储空间剩余不足20%，请及时清理', time: '2023-05-13 09:15', read: true },
  ];

  return (
    <div className="message-container">
      <Card bordered={false}>
        <Tabs activeKey={activeTab} onChange={setActiveTab}>
          <TabPane 
            tab={
              <span>
                <BellOutlined />
                通知 <Badge count={notifications.filter(item => !item.read).length} style={{ marginLeft: 4 }} />
              </span>
            } 
            key="1"
          >
            <div className="tab-content">
              <div className="tab-header">
                <Button type="primary">标记全部已读</Button>
                <Button>清空通知</Button>
              </div>
              <List
                itemLayout="horizontal"
                dataSource={notifications}
                renderItem={item => (
                  <List.Item className={item.read ? 'read' : 'unread'}>
                    <List.Item.Meta
                      avatar={<Avatar style={{ backgroundColor: '#1890ff' }} icon={<BellOutlined />} />}
                      title={<span>{item.title} {!item.read && <Badge status="processing" />}</span>}
                      description={item.content}
                    />
                    <div className="list-item-actions">
                      <Text type="secondary">{item.time}</Text>
                      <Space>
                        <a>查看</a>
                        <a>删除</a>
                      </Space>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
          <TabPane 
            tab={
              <span>
                <MessageOutlined />
                消息 <Badge count={messages.filter(item => !item.read).length} style={{ marginLeft: 4 }} />
              </span>
            } 
            key="2"
          >
            <div className="tab-content">
              <div className="tab-header">
                <Button type="primary">标记全部已读</Button>
                <Button>清空消息</Button>
              </div>
              <List
                itemLayout="horizontal"
                dataSource={messages}
                renderItem={item => (
                  <List.Item className={item.read ? 'read' : 'unread'}>
                    <List.Item.Meta
                      avatar={<Avatar src={item.avatar} />}
                      title={<span>{item.sender} {!item.read && <Badge status="processing" />}</span>}
                      description={item.content}
                    />
                    <div className="list-item-actions">
                      <Text type="secondary">{item.time}</Text>
                      <Space>
                        <a>回复</a>
                        <a>删除</a>
                      </Space>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
          <TabPane 
            tab={
              <span>
                <ExclamationCircleOutlined />
                告警 <Badge count={alarms.filter(item => !item.read).length} style={{ marginLeft: 4 }} />
              </span>
            } 
            key="3"
          >
            <div className="tab-content">
              <div className="tab-header">
                <Button type="primary">标记全部已读</Button>
                <Button>清空告警</Button>
              </div>
              <List
                itemLayout="horizontal"
                dataSource={alarms}
                renderItem={item => (
                  <List.Item className={item.read ? 'read' : 'unread'}>
                    <List.Item.Meta
                      avatar={
                        <Avatar 
                          style={{ 
                            backgroundColor: item.level === 'error' ? '#ff4d4f' : '#faad14' 
                          }} 
                          icon={<ExclamationCircleOutlined />} 
                        />
                      }
                      title={
                        <span>
                          {item.title} 
                          {!item.read && <Badge status="processing" />} 
                          <Tag color={item.level === 'error' ? 'error' : 'warning'} style={{ marginLeft: 8 }}>
                            {item.level === 'error' ? '严重' : '警告'}
                          </Tag>
                        </span>
                      }
                      description={item.content}
                    />
                    <div className="list-item-actions">
                      <Text type="secondary">{item.time}</Text>
                      <Space>
                        <a>处理</a>
                        <a>忽略</a>
                      </Space>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default Message; 
